<template>
  <div class="sout">
    <!-- {{newData}} -->
    <div v-for="(item, index) in newData" :key="index" class="inner" v-show="
                shrinkBoxOpenClose
                    ? item.searchSign
                    : item.searchSign && index < 8
            ">
      <!-- input框 -->
      <div class="inp searchOne" v-if="item.type === 'input'">
        <div class="font" style>{{ item.CN }}</div>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value" placeholder="请输入内容" @clear="clear" @keyup.enter.native="inputFoucs"></el-input>
      </div>
      <!-- select -->
      <div class="inp searchOne" v-else-if="item.type === 'select'">
        <!-- {{searchOption[item.CN]}} -->
        <div class="font">{{ item.CN }}</div>
        <!-- {{searchOption}} -->

        <el-select v-if="item.typeGroupCode" clearable class="el_inp" v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in searchOption[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
          <!-- <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option> -->
        </el-select>

        <!-- 归档 -->
        <el-select v-else-if="item.EN == 'guidang'" clearable class="el_inp" v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in item.option" :key="i.id" :label="i.label" :value="i.value"></el-option>
        </el-select>
        <!-- 搜索框租户信息 -->
        <el-select v-else-if="item.EN == 'sysCompanyCode'" clearable class="el_inp" v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in getFindByTypeData" :key="i.id" :label="i.name" :value="i.sysCompanyCode"></el-option>
        </el-select>
        <!-- 经销商入货单--生产厂商 -->
        <el-select v-else-if="item.EN == 'user' && !item.isCharge" clearable class="el_inp" v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in factoryForDealeroption" :key="i.value" :label="i.value" :value="i.value"></el-option>
        </el-select>

        <!-- 非手册，片区，字典::select -->
        <el-select v-else-if="item.dictTable && item.EN!= 'areaId' && item.EN != 'areaCode' && item.EN !='area'&& ( item.EN != 'book' &&
                        item.EN != 'hangbookCode' &&
                        item.EN != 'bookName' &&
                        item.EN != 'meterReadingManual' &&
                        item.EN != 'name'&& item.EN != 'bookId' && !item.isMeterreaderMultiple)" class="el_inp" clearable v-model="newData[index].value" size="mini" placeholder="请选择" :filterable="true" @clear="clear">
          <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>

        <!-- start @author: 单独的抄表员 !-->
        <el-select v-else-if="item.dictTable &&  item.isMeterreaderMultiple" class="el_inp" clearable v-model="newData[index].value" collapse-tags multiple size="mini" placeholder="请选择" :filterable=" true" @clear="clear">
          <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>
        <!-- 单独的手册::select multiple-->
        <el-select v-else-if="item.dictTable && ( item.EN == 'book' ||
                         item.EN =='hangbookCode' ||
                         item.EN =='bookName' ||
                         item.EN =='meterReadingManual' ||
                         item.EN =='name'||  item.EN =='bookId')" class="el_inp" clearable v-model="newData[index].value" collapse-tags :multiple="newData[index].isMultiple?true:false" size="mini" placeholder="请选择" :filterable=" true" @clear="clear">
          <el-option v-for="i in oBookList[item.EN] " :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>

        <!-- 单独的片区::select -->
        <el-select v-else-if="item.dictTable && (item.EN == 'areaId' || item.EN == 'areaCode' || item.EN == 'area')" class="el_inp" clearable v-model="newData[index].value" size="mini" placeholder="请选择" :filterable="true" @change="getBooks(item.value,item.bookKey)" @clear="clear">
          <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>

        <!-- 其他项 -->

        <el-select v-else class="el_inp" clearable v-model="newData[index].value" :filterable="true" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>

      </div>
      <!-- date 框  -->
      <div class="inp searchOne" clearable v-else-if="item.type === 'year' ">
        <!-- {{newData[index].value.moment().format('YYYY-MM-DD')}} -->
        <div class="font">{{ item.CN }}</div>
        <el-date-picker class="el_inp" size="mini" v-model="newData[index].value" type="year" :picker-options='pickerBeginDateBefore' :placeholder="item.defaultFullTime || item.defaultDate||'选择年份'" value-format="yyyy" clearable @clear="clear"></el-date-picker>
      </div>
      <div class="inp searchOne" clearable v-else-if="item.type === 'month' ">
        <!-- {{newData[index].value.moment().format('YYYY-MM-DD')}} -->
        <div class="font">{{ item.CN }}</div>
        <el-date-picker class="el_inp" size="mini" v-model="newData[index].value" type="month" :picker-options='pickerBeginDateBefore' :placeholder="item.defaultFullTime || item.defaultDate||'选择月份'" value-format="M" clearable @clear="clear"></el-date-picker>
      </div>
      <div class="inp searchOne" clearable v-else-if="item.type === 'date' ">
        <!-- {{newData[index].value.moment().format('YYYY-MM-DD')}} -->
        <div class="font">{{ item.CN }}</div>
        <el-date-picker v-if="item.oWaterDayValue" :default-value="item.oWaterDayValue" class="el_inp" size="mini" v-model="newData[index].value" type="datetime" :placeholder="item.oWaterDayValue" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear="clear"></el-date-picker>
        <el-date-picker class="el_inp" v-else-if="item.czKey" size="mini" :picker-options='pickerBeginDateBefore' v-model="newData[index].value" type="date" :placeholder="item.defaultFullTime" value-format="yyyy-MM-dd" clearable @clear="clear"></el-date-picker>

        <el-date-picker v-else class="el_inp" size="mini" v-model="newData[index].value" type="datetime" :picker-options='pickerBeginDateBefore' :placeholder="item.defaultFullTime || item.defaultDate||'选择日期时间'" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear="clear"></el-date-picker>

      </div>

      <!-- date 框   dateDate -->
      <div class="inp searchOne" clearable v-else-if="item.type === 'dateDate'">
        <div class="font">{{ item.CN }}</div>
        <!-- {{newData[index].value.moment().format('YYYY-MM-DD')}} -->
        <el-date-picker class="el_inp" v-if="item.defaultFullDate" size="mini" v-model="newData[index].value" type="date" :placeholder="item.defaultFullDate||'选择日期'" value-format="yyyy-MM-dd" clearable @clear="clear"></el-date-picker>
        <el-date-picker class="el_inp" v-else-if="item.waterUp" size="mini" :picker-options='pickerBeginDateBefore' v-model="newData[index].value" type="date" :placeholder="item.wDefaultFullDate || 选择日期" value-format="yyyy-MM-dd" clearable @clear="clear"></el-date-picker>
        <el-date-picker class="el_inp" v-else size="mini" v-model="newData[index].value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" clearable @clear="clear"></el-date-picker>

      </div>
      <div class="inp searchOne" v-else-if="item.type === 'dateTime'" style="width:140%;">
        <div class="font">开始时间</div>
        <el-date-picker class="el_inp" size="small" value-format="yyyy-MM-dd HH:mm:ss" v-model="value1" type="datetimerange" range-separator="-" start-placeholder="" end-placeholder="" @change="handleDatetimer" style="width: 500px;">
        </el-date-picker>
      </div>
      <!-- dateMonth 年月 框-->
      <div class="inp searchOne" clearable v-else-if="item.type === 'dateMonth'">
        <div class="font">{{ item.CN }}</div>
        <!-- {{newData[index].value.moment().format('YYYY-MM-DD')}} -->
        <el-date-picker v-if="item.oWaterMonthValue" class="el_inp" size="mini" :default-value="item.oWaterMonthValue" :placeholder="item.oWaterMonthValue" v-model="newData[index].value" type="month" value-format="yyyy-MM" clearable @clear="clear"></el-date-picker>
        <el-date-picker v-else class="el_inp" size="mini" v-model="newData[index].value" type="month" placeholder="选择年月" value-format="yyyy-MM" clearable @clear="clear"></el-date-picker>
      </div>
      <!-- dateTime 开始结束时间 框-->
      <div class="inp searchOne" clearable v-else-if="item.type === 'datetime'">
        <div class="font">{{ item.CN }}</div>
        <el-date-picker class="el_inp" size="mini" v-model="newData[index].value" type="daterange" range-separator="-" start-placeholder="开始日期" clearable end-placeholder="结束日期" @clear="clear"></el-date-picker>
      </div>
      <!-- 范围 range   测试-->
      <!-- <div class="inp searchOne" v-if="item.type==='range'">
        <div class="font" style>{{item.CN}}</div>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value[0]" placeholder="请输入" @clear='clear'></el-input>
        <span>-</span>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value[1]" placeholder="请输入" @clear='clear'></el-input>
      </div>-->
      <!-- <div class="inp searchOne" v-if="item.type==='range'">
        <div class="font" style>{{item.CN}}</div>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value[0]" placeholder="请输入" @clear='clear'></el-input>
        <span>-</span>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value[1]" placeholder="请输入" @clear='clear'></el-input>
      </div>-->
    </div>
  </div>
</template>
<script>
import { flBooksearchDim } from '@/api/waterMeterInfo/flWaterMeterInfo'
export default {
  name: 'searchComponents',
  props: [
    'searchData',
    'optionsZi',
    'searchOptionTable',
    'getFindByTypeData',
    'factoryForDealeroption',
    'shrinkBoxOpenClose',
    'resetStatus'
  ],
  data () {
    return {
      //深拷贝的searchData
      value1: '',
      dateTimerObj: {
        startDateStr: "",
        endDateStr: ""
      },
      dataModel: '',
      newData: [],
      // 组件类型
      modelType: 'search',
      // 请求到的option
      // ç:[],
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      oBookList: {},
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          return time.getTime() > new Date().getTime()
        },
      },
    }
  },
  created () {
    this.newData = this.changeData(this.searchData)
  },
  mounted () {
    this.getOptionsZi()
    this.$bus.on('goSearchComponents', (BOO) => {
      let emData = this.newData
      emData.forEach((val) => {
        val.value = ''
      })
    })
  },
  watch: {
    searchData: {
      handler (newValue, oldValue) {
        this.newData = JSON.parse(JSON.stringify(newValue)) //深拷贝
        this.newData = this.changeData(newValue)
        this.$emit('searchCallBack', this.newData, this.dateTimerObj)
      },
      deep: true,
    },
    /* newData: {
      handler(newValue, oldValue) {
        this.$emit('searchCallBack', newValue)
      },
      deep: true,
    }, */
    optionsZi (newVal) {
      console.log('%c[一般字典]=>', 'color:red;', newVal)

      this.searchOption = newVal
    },
    searchOptionTable (newVal) {
      console.log('%c[跨表字典]=>', 'color:green;', newVal)

      this.oBookList = this.searchOptions = newVal
    },
    resetStatus: {
      handler (val) {
        debugger;
        this.value1 = ""
        this.dateTimerObj.startDateStr = ""
        this.dateTimerObj.endDateStr = ""
      }
    }
  },
  computed: {},
  methods: {
    //获取时间
    handleDatetimer (v) {
      console.log(this.newData)
      this.dateTimerObj.startDateStr = v[0]
      this.dateTimerObj.endDateStr = v[1]
      this.$emit('searchCallBack', this.newData, this.dateTimerObj)
    },
    async getBooks (value, key) {
      const oBookData = {}
      let oBookList = [
        'hangbookCode',
        'bookName',
        'meterReadingManual',
        'name',
        'bookId',
        'book',
      ]
      let { data = [] } = await flBooksearchDim({ area: value })
      data.length &&
        data.forEach((item) => {
          if (key == 'bookKey') {
            item.value = item.name
            item.label = item.name
          } else {
            item.value = item.id
            item.label = item.name
          }
        })
      oBookList.forEach((item) => {
        oBookData[item] = data
      })
      console.log('===========', oBookList, oBookData)
      this.oBookList = oBookData
    },
    changeData (data) {
      let searchArrData = []
      for (let i = 0; i < this.searchData.length; i++) {
        const element = this.searchData[i]
        if (element.searchSign) {
          searchArrData.push(element)
        }
      }
      return searchArrData
    },
    inputFoucs () {
      // console.log(this.$parent,357);
      // console.log(this.$parent.suoS,357);
      // console.log(this.$parent.pagesize,357);
      // console.log(this.$parent.currentPage,357);
      // console.log(this.$parent.forData,357);
      this.$parent.forData(
        this.$parent.currentPage,
        this.$parent.pagesize,
        this.$parent.suoS || this.$parent.searchContent
      )
    },
    // 初始化字典
    getOptionsZi () {
      this.searchOption = this.optionsZi
      this.searchOptions = this.searchOptionTable
    },
    clear () {
      this.$emit('clearSearch', '清空')
    },
  },
}
</script>
<style lang="scss" scoped>
.sout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // align-content:space-between;
  width: 100%;
  // padding: 0px 40px;
  // padding: 20px 30px 30px 30px !important;
  /deep/.el-select__tags {
    //.el-select__tags
    // margin-top: 5px;
    /*  input {
      height: 0px;
    } */
  }
  .inner:nth-child(-n + 4) {
    margin-top: 0px;
    // flex: 1;
    // width:80px;
    height: 34px;
    width: 25%;
    // display: flex;
    // margin-top: 0px;
    // padding: 0px 15px;
    .searchOne {
      margin: 0 !important;
      .font {
        width: 35%;
        text-align: right;
        height: 34px;
        line-height: 34px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 12px;
        font-size: 15px;
        // font-weight: 500;
        color: #000;
      }
      .el_inp {
        width: 85%;
      }
    }
    // .inner :nth-child(1) :nth-child(2) :nth-child(3) :nth-child(4)

    .inp {
      // flex: 100;
      display: flex;
      margin: 7.5px 0px;
      height: 34px;
      line-height: 34px;
      .el_inp {
        width: 84%;
        height: 34px;
        /deep/.el-input__inner {
          height: 34px;
        }
      }
    }
  }
  .inner {
    margin-top: 15px;
    // flex: 1;
    // width:80px;
    height: 34px;
    width: 25%;
    // display: flex;
    // margin-top: 0px;
    // padding: 0px 15px;
    .searchOne {
      margin: 0 !important;
      .font {
        width: 35%;
        text-align: right;
        height: 34px;
        line-height: 34px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 12px;
        font-size: 15px;
        // font-weight: 500;
        color: #000;
      }
      .el_inp {
        width: 65%;
      }
    }
    // .inner :nth-child(1) :nth-child(2) :nth-child(3) :nth-child(4)

    .inp {
      // flex: 100;
      display: flex;
      margin: 7.5px 0px;
      height: 34px;
      line-height: 34px;
      .el_inp {
        width: 84%;
        // width: 280px;
        height: 34px;
        /deep/.el-input__inner {
          height: 34px;
        }
      }
    }
  }
  .innerbtn {
    width: 25%;
    padding: 7.5px 20px;
  }
}
</style>
